{% extends "head.html" %}
{% block content %}
<div class="row" style="padding-top: 10px;padding-bottom: 50px;">
    <div class="col-sm-1"></div>
    <div class="col-sm-10" style="padding: 20px;padding-left: 80px;padding-right: 80px;background-color: rgb(227, 239, 250);">
        <div style="padding: 40px;">
            <form>
                <div style="padding: 5px;"><p style="font-size: 18px;">nickname: </p></div>
<!--                <div style="padding: 5px;"><p style="font-size: 18px;">昵称: </p></div>-->
                <div style="padding: 5px;">
                    <div  contenteditable="true" id="nickname"
                        style="background-color: white;border: solid 2px gainsboro; height: 30px; font-size: 18px;">
                        {{data['user'].nickname}}
                    </div>
                </div>
                <p id="m_nk"></p>
                <div style="padding: 5px;"><p style="font-size: 18px;">password: </p></div>
<!--                <div style="padding: 5px;"><p style="font-size: 18px;">密码: </p></div>-->
                <div style="padding: 5px;">
                    <div  contenteditable="true" class="div_in" id="new_pwd" 
                        style="background-color: white;border: solid 2px gainsboro; height: 30px; font-size: 20px;">
                        新密码
                    </div>
                </div>
                <p id="m_np"></p>
                <p style="height: 20px; font-size: 15px;" id="mesg"></p>
                <script>
                    $(".div_in").focus(function(e){
                        $(this).html("")
                    })
                </script>
                <button type="button" id="btn" style="
                    opacity: 1;
                    width: 70px;
                    height: 32px;
                    outline: none;
                    background-color: #00a1d6;
                    font-size: 13px;
                    line-height: 33px;
                    color: #fff;
                    border: none;
                    border-radius: 4px;">submit</button>
            </form>
            <script>
                $("#btn").click(function(){
                    nickname = $.trim($("#nickname").html())
                    new_pwd = $.trim($("#new_pwd").html())
                    flag = 0
                    if(nickname.length<1||nickname.length>9){
                        //$("#m_nk").html("用户名应为1~9字节")
                        $("#m_nk").html("The user name should be 1-9 bytes")
                        flag = 1
                    }
                    else if((new_pwd=="新密码"||new_pwd=="")!=true){
                        if (new_pwd.length<6||new_pwd.length>30){
                            $("#m_np").html("The password should be 6-30 digits")
                            //$("#m_np").html("密码应为6~30位")
                            flag = 1
                        }
                        if (flag==1)
                            return
                        new_pwd = md5(new_pwd)
                        $.ajax({
                            url:'/info/'+ {{data['user'].userid}},
                            type:'post',
                            data:{nickname:nickname,new_pwd:new_pwd},
                            success:function(data){
                                $("#m_nk").html(data['nickname'])
                                $("#m_np").html(data['pwd'])
                            }
                        })
                        
                    }
                    else{
                        $.ajax({
                            url:'/info/'+ {{data['user'].userid}},
                            type:'post',
                            data:{nickname:nickname},
                            success:function(data){
                                $("#m_nk").html(data['nickname'])
                                $("#m_np").html("")
                            }
                        });
                    }
                })
                </script>
        </div>
    </div>
</div>
{% endblock %}